<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Singer</title>

    <link rel="stylesheet" href="mycss.css">
   
</head>

<body>
    <script src="jquery-1.8.3.js"></script>
    <script src="myjs.js"></script>
    <div class="container">
        <div>
            <ul>
                <h1>地区分类：</h1>
                <button id="all">全部</button>
                <button id="huayu">华语</button>
                <button id="oumei">欧美</button>
                <button id="riben">日本</button>
                <button id="hanguo">韩国</button>
            </ul>
        </div>
        <div>
            <ul>
                <h1>性别分类：</h1>
                <button id="all">全部</button>
                <button id="man">男</button>
                <button id="woman">女</button>
            </ul>
        </div>
        <div>
            <ul>
                <h1>风格分类：</h1>
                <button id="dianzi">电子</button>
                <button id="minyao">民摇</button>
                <button id="qita">其他</button>
            </ul>
        </div>
    </div>
    <hr size="5px" color="white">
    <!-- <img src="image\背景.jpeg" alt="" > -->
    <!-- 以下是需要分类的部分 -->
    <div class="totalsinger">

        <div class="singer">
            <div class="artist-container">
                <img src="image\\zhou.jpg" alt="picture">
                <span><a href="zhou.html" class="my-link">周杰伦</a></span>
            </div>
            <div class="artist-container">
                <img src="image\\chen.webp" alt="picture">
                <span>陈奕迅</span>
            </div>
            <div class="artist-container">
                <img src="image\\zhang.webp" alt="picture">
                <span>张杰</span>
            </div>
            <div class="artist-container">
                <img src="image\\lin.jpg" alt="picture">
                <span>林俊杰</span>
            </div>
        </div>

        <br>

        <div class="singer">
            <div class="artist-container">
                <img src="image\\huang.jpg" alt="picture">
                <span>黄家驹</span>
            </div>
            <div class="artist-container">
                <img src="image\\alan.webp" alt="picture">
                <span>Alan Walker</span>
            </div>
            <div class="artist-container">
                <img src="image\\wang.jpg" alt="picture">
                <span>王绎龙</span>
            </div>
            <div class="artist-container">
                <img src="image\\bei.webp" alt="picture">
                <span>贝多芬</span>
            </div>

            <!--    
            <div class="artist-container">
            <img src="image\\niming.jpg" alt="picture">
            <span>正在引入中...</span>
        </div>
    -->

        </div>

    </div>


</body>

</html>